<template>
    <!--
        案例目标： 父组件（Product） -> 子组件（MyProduct） 分别传值进去
        父组件 向子组件传递数据的时候 采用 props -> 子组件 接收数据变量名
    -->
    <!-- <MyProduct title="瑞星咖啡" price="6.6" intro="今天老板不在家，1折起购"></MyProduct>
    <MyProduct title="口水鸭" price="1.2" intro="今天老板吃巴豆了，限时抢购0.5折起"></MyProduct>
    <MyProduct title="汉堡" price="10" :intro="instr"></MyProduct> -->
    <!--循环获取数据-->
    <!-- <MyProduct v-for="item in list" :key="item.id"
        :title="item.Pname"
        :price="item.Pprice"
        :intro="item.Pintro"
    ></MyProduct> -->
    <!---对象方式编写-->
    <!-- <MyProduct v-for="item in list" :key="item.id" :obj="item"/> -->
    <MyProduct v-for="(item, ind) in list" :key="item.id" :title="item.Pname" :price="item.Pprice" :intro="item.Pintro"
        :index="ind" @subprice="fn"></MyProduct>
</template>
<script>
import MyProduct from './MyProduct.vue';
export default {
    data() {
        return {

            instr: '老板回家相亲了，高兴打折活动10块钱10个吧',
            list: [
                { id: '1', Pname: '瑞星咖啡', Pprice: '6.6', Pintro: '今天老板不在家，1折起购' },
                { id: '2', Pname: '口水鸭', Pprice: '1.2', Pintro: '今天老板吃巴豆了，限时抢购0.5折起' },
                { id: '3', Pname: '汉堡', Pprice: '10', Pintro: '老板回家相亲了，高兴打折活动10块钱10个吧' },
                { id: '4', Pname: '奔驰ClA220', Pprice: '12.88', Pintro: '不干彻底不干了，今天针对cla全场清仓处理' },

            ]

        };
    },
    components: {
        MyProduct,
    },
    methods: {
        fn(index, price) {
            console.log(this.list[index]);
            //逻辑代码
            this.list[index].Pprice > 1 && (this.list[index].Pprice = (this.list[index].Pprice - price).toFixed(2))
        }
    }
};

</script>